import { DefaultFooter, getMenuData, getPageTitle } from '@ant-design/pro-layout'
import { Helmet, HelmetProvider } from 'react-helmet-async'
import { Link, useIntl, connect } from 'umi'
import React from 'react'
import SelectLang from '@/components/SelectLang'
import logo from '../assets/logo120.png'
import styles from './UserLayout.less'
import request from '@/utils/request'

const UserLayout = (props) => {
  const {
    route = {
      routes: [],
    },
  } = props
  const { routes = [] } = route
  const {
    children,
    location = {
      pathname: '',
    },
  } = props
  const { formatMessage } = useIntl()
  const { breadcrumb } = getMenuData(routes)
  const title = getPageTitle({
    pathname: location.pathname,
    formatMessage,
    breadcrumb,
    ...props,
  })
  return (
    <HelmetProvider>
      <Helmet>
        <title>{title}</title>
        <meta name="description" content={title}/>
      </Helmet>

      <div className={styles.container}>
        <div className={styles.lang}>
          <SelectLang/>
        </div>
        <div className={styles.content}>
          <div className={styles.top}>
            <div className={styles.header}>
              <Link to="/">
                <img alt="logo" className={styles.logo} src={logo}/>
                <span className={styles.title}>人力共享中心</span>
              </Link>
            </div>
            <div className={styles.desc}>人力共享中心HR端平台</div>
          </div>
          {children}
        </div>
          <div style={{ background: '#ffffff',display:'flex',justifyContent: 'center' }}>
            <div style={{ textAlign: 'center', padding:'12px' }}>
              <img width='60' height='60' src={require('@/assets/chrome.jpg')}/>
              <div>谷歌浏览器(chrome)</div>
              <div style={{color:'#68B377', fontWeight:'bold'}}>推荐</div>
            </div>
            <div style={{ textAlign: 'center',padding:'12px' }}>
              <img width='60' height='60' src={require('@/assets/firefox.jpg')}/>
              <div>火狐浏览器(firefox)</div>
              <div style={{color:'#68B377', fontWeight:'bold'}}>推荐</div>
            </div>
            <div style={{ textAlign: 'center',padding:'12px' }}>
              <img width='60' height='60' src={require('@/assets/safari.jpg')}/>
              <div>苹果浏览器(safari)</div>
              <div style={{ fontWeight:'bold'}}>可用</div>
            </div>
            <div style={{ textAlign: 'center',padding:'12px' }}>
              <img width='60' height='60' src={require('@/assets/edge.jpg')}/>
              <div>微软浏览器(edge)</div>
              <div style={{ fontWeight:'bold'}}>可用</div>
            </div>
            <div style={{ textAlign: 'center',padding:'12px' }}>
              <img width='60' height='60' src={require('@/assets/opera.jpg')}/>
              <div>欧朋浏览器(opera)</div>
              <div style={{ fontWeight:'bold'}}>可用</div>
            </div>
            <div style={{ textAlign: 'center',padding:'12px' }}>
              <img width='60' height='60' src={require('@/assets/360safe.jpg')}/>
              <div>360浏览器</div>
              <div style={{ fontWeight:'bold'}}>极速模式可用</div>
            </div>
            <div style={{ textAlign: 'center',padding:'12px' }}>
              <img width='60' height='60' src={require('@/assets/sougou.jpg')}/>
              <div>搜狗浏览器</div>
              <div style={{ fontWeight:'bold'}}>极速模式可用</div>
            </div>
            <div style={{ textAlign: 'center',padding:'12px' }}>
              <img width='60' height='60' src={require('@/assets/noie.jpg')}/>
              <div>IE浏览器</div>
              <div style={{ color:'red',fontWeight:'bold'}}>不可用</div>
            </div>
          </div>
      </div>
    </HelmetProvider>
  )
}

export default connect(({ settings }) => ({ ...settings }))(UserLayout)
